<template>
  <div class="app-container">
    <el-form :model="searchForm" inline label-width="68px">
      <el-form-item label="品牌名">
        <el-input v-model="searchForm.name" placeholder="请输入品牌名" @keyup.enter="getList"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.key" placeholder="请输入权限字符"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="角色状态">
          <el-option label="启用" value="enabled"/>
          <el-option label="禁用" value="disabled"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="searchForm.dateRange" type="daterange"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row gutter="10" style="margin-bottom: 10px">
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      <el-button type="danger">删除</el-button>
      <el-button type="warning">导出</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="brandId" label="品牌ID" width="100"></el-table-column>
      <el-table-column prop="name" label="品牌名"></el-table-column>
      <el-table-column prop="logo" label="LOGO地址" width="100">
        <template #default="{row}">
          <ImagePreview :urls="row.logo"/>
        </template>
      </el-table-column>
      <el-table-column prop="descript" label="介绍"></el-table-column>
      <el-table-column prop="showStatus" label="状态">
        <template #default="{row}">
          <el-switch v-model="row.showStatus" @click="handleStatus(row)"/>
        </template>
      </el-table-column>
      <el-table-column prop="firstLetter" label="检索首字母"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-link type="primary">修改</el-link>
          <el-link type="danger">删除</el-link>
          <el-link type="info">更多</el-link>
        </template>
      </el-table-column>
    </el-table>

  </div>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="searchForm.page"
      v-model:page-size="searchForm.limit"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="sizes, prev, pager, next"
      :total="searchForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="float: right; margin-top: 2vh;"
  />

  <el-dialog :title="brandForm.brandId ? '修改' : '新增'" v-model="dialogVisible" append-to-body>
    <el-form ref="modelFrom" :model="brandForm" :rules="rules" label-width="100px">
      <el-form-item label="品牌名" prop="name">
        <el-input v-model="brandForm.name"/>
      </el-form-item>
      <el-form-item label="介绍" prop="descript">
        <el-input v-model="brandForm.descript" type="textarea"/>
      </el-form-item>
      <el-form-item label="状态" prop="showStatus">
        <el-switch v-model="brandForm.showStatus"/>
      </el-form-item>
      <el-form-item label="首字母" prop="firstLetter">
        <el-input v-model="brandForm.firstLetter"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="brandForm.sort" :min="0"/>
      </el-form-item>
      <el-form-item label="LOGO" prop="logo">
        <single-image-upload v-model="brandForm.logo"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="Submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue'
import { getBrandPage, insertBrand, updateBrand } from '@/api/product/brand'
import type { Brand } from '@/api/product/brand'
import { ElMessage, type FormInstance } from 'element-plus'
import SingleImageUpload from '@/components/Upload/SingleImage.vue'
import ImagePreview from '@/components/Image/ImagePreview.vue'

defineComponent({
  name: 'Brand'
})

const rules = {
  name: [
    { required: true, message: '请输入品牌名', trigger: 'blur' }
  ],
  logo: [
    { required: true, message: '请上传LOGO', trigger: 'blur' }
  ],
  firstLetter: [
    {
      validator: ( rule, value, callback ) => {
        if (value && value.length > 1) {
          callback(new Error('首字母只能输入1个字符'))
        } else {
          callback()
        }
      }, trigger: 'blur'
    }
  ]
}

const searchForm = reactive({
  name: '',
  key: '',
  status: '',
  dateRange: [],
  page: 1,
  limit: 10,
  total: 0
})
const brandForm = ref<Brand>({
  brandId: null,
  name: '',
  logo: ''
})
const modelFrom = ref<FormInstance>()

const tableData = ref<Brand[]>()
const dialogVisible = ref(false)

async function Submit() {
  const validate = await modelFrom.value?.validate()
  if (validate) {
    await insertBrand(brandForm.value)
    await getList()
    ElMessage.success('添加成功')
    dialogVisible.value = false
  }
}

async function handleStatus( row ) {
  await updateBrand({ showStatus: row.showStatus, brandId: row.brandId })
}

async function getList() {
  const { list, currPage, pageSize, totalCount } = await getBrandPage(searchForm)
  tableData.value = list
  searchForm.total = totalCount
  searchForm.page = currPage
  searchForm.limit = pageSize
}

function handleSizeChange( size ) {
  searchForm.limit = size
  getList()
}

function handleCurrentChange( page ) {
  searchForm.page = page
  getList()
}

getList()
</script>

<style lang="scss" scoped>

</style>
